<template>
<div id="RzInfo" class="page-blank">
  <van-nav-bar title="认证信息" left-arrow @click-left="goBack()"/>

  <div style="height: 1.76rem; width: 100%; background: #fff; position: relative;">
    <div style="width: 1.1rem; height: 1.1rem; position: absolute; left: 0.42rem; top: 0.3rem; border-radius: 50%;" 
      :style="`background: url(${ $store.state.userInfo.icon || './logo.png' }) center center / 100% 100%;`"></div>
    <div style="position: absolute; left: 1.8rem; top: 0.46rem; font-size: 0.3rem; color: #000; letter-spacing: 1px;">{{ info.userRealName }}</div>
    <div style="width: 1.74rem; height: 0.36rem; position: absolute; left: 1.8rem; top: 1rem; background: #f45e23; border-radius: 0.18rem;
      font-size: 0.3rem; color: #ffffff; font-size: 0.18rem; line-height: 0.36rem; text-align: center; letter-spacing: 1px;">商户认证</div>
  </div>  

  <div style="width: 100%; height: auto; background: #fff; padding: 0 0.4rem; margin-top: 0.3rem; box-sizing: border-box;">
    <div class="row-item">
      <div class="left-name">用户ID</div>
      <div class="right-text">{{ info.userId }}</div>
    </div>
    <div class="border-bottom"></div>

    <div class="row-item">
      <div class="left-name">认证姓名</div>
      <div class="right-text">{{ info.userRealName }}</div>
    </div>
    <div class="border-bottom"></div>

    <div class="row-item">
      <div class="left-name">认证手机</div>
      <div class="right-text">{{ $store.state.userInfo.phone }}</div>
    </div>
    <div class="border-bottom"></div>

    <div class="row-item">
      <div class="left-name">认证身份证号</div>
      <div class="right-text">{{ info.userIdCard }}</div>
    </div>
  </div>

  <!-- <div style="width: 100%; height: auto; background: #fff; padding: 0 0.4rem; margin-top: 0.3rem; box-sizing: border-box;">
    <div class="row-item">
      <div class="left-name">解绑认证</div>
      <div class="right-text">
        <van-icon name="arrow" style="font-size: 0.34rem;"/>
      </div>
    </div>
  </div> -->

  <div style="width: 6.7rem; height: 1.06rem; line-height: 1.06rem; text-align: center; border-radius: 5px; 
    background: #18a3dc; color: #fff; margin: 1.2rem auto 0; font-size: 0.32rem;" @click="() => $router.replace('RzPage')">重新认证</div>
</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class RzInfo extends Vue {

  info: any = {}

  goBack() {
    this.$router.go(-1);
  }

  mounted() {
    axios.get('/api/IdentityController/getIdentity', {
      userId: this.$store.state.userInfo.userId
    }).then((res: any) => {
      if(res) this.info = res;
      else this.$router.replace('RzPage');  
    });
  }
  
};
</script>

<style lang="scss">
#RzInfo {
  background: #f7f7f7;
  .row-item{
    height: 1.1rem;
    font-size: 0.3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .left-name { color: #000000; }
    .right-text { color: #b3b3b3; }
  }
  .border-bottom{ 
    width: 100%;
    height: 1px;
    background: #ebebeb;
  }
}
</style>

